import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          useMaterial3: false,
          primarySwatch: Colors.blue,
        ),
        home: const MyHome()
    );
  }
}

class MyHome extends StatefulWidget {
  const MyHome({super.key});

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {

  late AnimationController _animationController;

  bool flag = true;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1000)
    );
  }

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title: const Text("Flutter App"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SlideTransition(
              position: _animationController.drive(
                Tween(begin: const Offset(0.0,0.0),end: const Offset(0.5,0.0))
                    .chain(CurveTween(curve: const Interval(0, 0.25))
                )
              ),
              child: Container(
                height: 50,
                width: 200,
                color: Colors.blue[100],
              ),
            ),
            SlideTransition(
              position: _animationController.drive(
                  Tween(begin: const Offset(0.0,0.0),end: const Offset(0.5,0.0))
                      .chain(CurveTween(curve: const Interval(0.25, 0.5))
                  )
              ),
              child: Container(
                height: 50,
                width: 200,
                color: Colors.blue[200],
              ),
            ),
            SlideTransition(
              position: _animationController.drive(
                  Tween(begin: const Offset(0.0,0.0),end: const Offset(0.5,0.0))
                      .chain(CurveTween(curve: const Interval(0.5, 0.75))
                  )
              ),
              child: Container(
                height: 50,
                width: 200,
                color: Colors.blue[400],
              ),
            ),
            SlideTransition(
              position: _animationController.drive(
                  Tween(begin: const Offset(0.0,0.0),end: const Offset(0.5,0.0))
                      .chain(CurveTween(curve: const Interval(0.75, 1))
                  )
              ),
              child: Container(
                height: 50,
                width: 200,
                color: Colors.blue[600],
              ),
            ),
          ],
        )
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          flag ? _animationController.forward() : _animationController.reverse();
          flag =!flag;
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}
